<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group :title="title">
        <van-swipe-cell v-for="item in retailers" :key="item.id">
          <van-cell :key="item.id" :title="item.name" :label="item.address">
            <template>
              <van-tag type="danger" v-if="item.flag == 0">{{
                item.flag_name
              }}</van-tag>
              <van-tag type="success" v-else>{{ item.flag_name }}</van-tag>
            </template>
            <template #label>
              <div style="padding: 5px 0;">
                {{ item.telephone }}
              </div>
              <div>{{ item.address }}</div>
            </template>
          </van-cell>
          <template #right>
            <van-button
              v-if="item.flag == 0 || item.flag == null"
              class="swipe-cell-button"
              square
              type="primary"
              text="通过"
              @click="onShow(item.id, 1)"
            />
            <van-button
              v-if="item.flag == 1 && wx_staff === 1"
              class="swipe-cell-button"
              square
              type="danger"
              text="取消"
              @click="onShow(item.id, 0)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
    <van-dialog
      v-model="show"
      title="商家审核"
      show-cancel-button
      :message="message"
      @confirm="onConfirm"
      @close="onClose"
    >
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxRetailers, updateWxRetailer } from "@/api/member";

export default {
  name: "RetailerVerify",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      show: false,
      error: false,
      message: "确认通过审核吗？",
      loading: false,
      finished: false,
      retailers: [],
      listQuery: {
        page: 1,
        page_size: 5,
      },
      retailer_id: null,
      flag: null,
      ratio: null,
    };
  },
  computed: {
    ...mapGetters(["wx_staff"]),
  },
  methods: {
    onLoad() {
      this.getRetailerList();
    },
    getRetailerList() {
      let _this = this;
      getWxRetailers(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.retailers = []; // 清空数组
            _this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.retailers.push(...res.data.results);
          _this.loading = false;

          if (this.retailers.length >= res.data.count) {
            _this.finished = true; // 结束加载状态
          }
        })
        .catch((error) => {
          _this.loading = false;
          _this.finished = true;
          _this.error = true;
          if (error.response) {
            _this.$notify({ type: "danger", message: "读取商户失败" + error });
          }
        });
    },
    onShow(id, flag) {
      this.retailer_id = id;
      this.flag = flag;
      if (this.flag == 0) {
        this.message = "真的取消此商家吗?";
      } else {
        this.message = "确认通过审核吗？";
      }
      this.show = true;
    },
    onClose() {
      this.ratio = null;
      this.show = false;
    },
    onConfirm() {
      const data = {
        id: this.retailer_id,
        flag: this.flag,
      };
      updateWxRetailer(data)
        .then((res) => {
          const data = res.data;
          const index = this.retailers.findIndex((v) => v.id == data.id);
          this.retailers.splice(index, 1, data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  mounted() {},
};
</script>

<style  scoped>
.van-cell__title {
  flex: 3;
}
.van-radio {
  margin-bottom: 8px;
}
.van-radio-group {
  padding: 20px;
}
</style>